<template>
	<view>
		<h-dig :showMenu="isShow1"></h-dig>
		<view class="search-box">
			<view class="search">
				<text class="icon">&#xe628;</text>
				<input type="text" value="" @input="searchInput" placeholder="商品sku编码" />
			</view>
		</view>
		<view class="">
			{{mode1}}
		</view>
		<view class="content-box" :style="'height:' + contentHeight + 'px'">
			<!-- 左边栏目 -->
			<view class="left-content">
				<view
					class="left-item"
					style="position: relative;"
					v-for="(item, index) in leftCate"
					:key="index"
					ref="menuList"
					@click="selectLeft(index)"
					:class="{ current: currentIndex == index }"
				>
					<text>{{ item.name }}</text>
					<view class="grod" v-if="item.num > 0">{{ item.num }}</view>
				</view>
			</view>
			<!-- 右边 -->
			<view class="right-content">
				<view class="r-top-nav">
					<view class="r-t-item" v-for="(item, index) in rTopNav" :key="index" @click="selectTop(index)" :class="{ 'r-current': rCurrentIndex == index }">
						{{ item.name }}
						<text v-if="item.number > 0">{{ item.number }}</text>
					</view>
				</view>
				<view class="r-bottom-box">
					<scroll-view scroll-y scroll-with-animation :style="{ height: this.contentHeight - 33.5 + 'px' }" @scrolltolower="lower">
						<view class="list" v-for="(item, index) in list" :key="index">
							<view class="indexList">#{{ item.order_picking_id }}</view>
							<view class="order">订单编号：{{ item.number }}</view>
							<view class="time">
								送达时间：
								<text>{{ item.time_words }}</text>
								<!-- <text>立即送达</text> -->
							</view>
							<view class="remarks" v-if="item.shortage_state === 1">备注：{{ item.remarks }}</view>
							<view class="a-btn" @click="open(item,1)" v-if="item.state === 1">去拣货</view> 
							<view class="a-btn" @click="open(item,2)" style="background: #61BF82;" v-if="item.state === 2">拣货中</view>
							<view class="a-btn" @click="del(item)" style="background: #F91616;" v-if="item.state === 3">删除</view>
							<view class="a-btn" style="background: #CCCCCC;" v-if="item.shortage_state === 1">处理完成</view>
							<view class="a-btn" @click="open3(item)" style="background: #F91616;" v-if="item.shortage_state === 2">去处理</view>
							<view class="a-btn" style="background: rgba(46, 204, 113, 1)" v-if="!item.state && !item.shortage_state">拣货完成</view>
						</view>
						<uni-load-more :status="more" v-if="count > 10"></uni-load-more>
					</scroll-view>
				</view>
			</view>
		</view>
		<!-- 拣货弹窗 -->
		<uni-popup style="z-index: 99;" :maskClick="false" ref="popup" type="center">
			<view class="pop-box">
				<text class="icon" style="position: absolute;right: 0;top: -50upx;color: #FFFFFF;" @click="cancelFirst">&#xe62b;</text>
				<view class="title">拣货</view>
				<view class="pop-info">
					<view class="info-top">
						<text>#{{ editInfo.order_picking_id }}</text>
						<text>拣货中</text>
					</view>
					<view class="order">订单编号：{{ editInfo.number }}</view>
					<view class="time">
						送达时间：
						<text>{{ editInfo.time_words }}</text>
					</view>
					<!-- <view class="scan icon" @click.stop="scanCode">&#xe645;</view> -->
				</view>
				<view class="pop-content">
					<view class="pop-content-tit">
						<text class="name">商品</text>
						<text class="state">已拣货</text>
					</view>
					<view class="cont-item">
						<scroll-view scroll-y scroll-with-animation :style="{ height: editList.length > 3 ? '400upx' : '' }">
							<view class="item-1" v-for="(item, index) in editList" :key="index">
								<view class="name">{{ item.name }}</view>
								<view class="sku">sku：{{ item.sku_code }}</view>
								<view class="number">{{ item.qNum }}/{{ item.num }}</view>
							</view>
						</scroll-view>
					</view>
				</view>
				<view class="pop-btn-group">
					<view class="cancel" @click="cancelFirst">取消拣货</view>
					<view class="submit" @click="comf1">拣货完成</view>
				</view>
			</view>
		</uni-popup>
		<!-- 拣货确定事件 -->
		<uni-popup style="z-index: 100;" :maskClick="false" :isShow="true" ref="pop1" type="center">
			<view class="pop-box">
				<text class="icon" style="position: absolute;right: 0;top: -50upx;color: #FFFFFF;" @click="cancelFirst">&#xe62b;</text>
				<view class="title">提示</view>
				<view class="conten">有商品未拣货完成，确定提交？</view>
				<view class="pop-btn-group">
					<view class="cancel" style="background: #E62154 !important;color: #FFFFFF !important;" @click="conAndBao">确定并报损</view>
					<view class="submit" @click="comf2">确定</view>
				</view>
			</view>
		</uni-popup>
		<!-- 缺货拣货事件弹窗 -->
		<uni-popup style="z-index: 100;" :isShow="true" ref="pop3" type="center">
			<view class="pop-box">
				<view class="title">处理</view>
				<view class="conten" style="padding: 20upx 0;"><textarea value="" placeholder="请输入处理人+处理备注" v-model="dispose" /></view>
				<view class="pop-btn-group">
					<view class="cancel" @click="closePop3">取消</view>
					<view class="submit" @click="comf3">确定</view>
				</view>
			</view>
		</uni-popup>
		<!-- 商品不存在拣货弹窗列表时 -->
		<uni-popup style="z-index: 100;" :isShow="true" ref="popTan" type="center">
			<view class="pop-box">
				<view class="title">提示</view>
				<view class="conten">商品不存在，请检查</view>
				<view class="pop-btn-group">
					<view class="submit" @click="comfTan">确定</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import hDig from '@/components/h-dig.vue';
import uniPopup from '@/components/uni-popup/uni-popup.vue';
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
// #ifdef APP-PLUS
const sunmi_print = uni.requireNativePlugin('Sunmi-Print-Inner');
import { Net, DATA, SOURCE } from '../../utils/scanCode.js';
// #endif
var main, receiver, filter;
var _codeQueryTag = false;
var isConnect = false;
export default {
	components: { uniPopup, uniLoadMore, hDig },
	data() {
		return {
			more: 'more',
			leftCate: [
				{
					name: 'E盒生鲜',
					num: 0
				},
				{
					name: '美团外卖',
					num: 0
				},
				{
					name: '饿了么',
					num: 0
				},
				{
					name: '京东到家',
					num: 0
				}
			],
			rTopNav: [{ name: '未拣货', number: 0 }, { name: '缺货拣货', number: 0 }, { name: '拣货完成', number: 0 }],
			query: {
				picking_type: 1,
				type: 1,
				page: 1,
				limit: 10,
				number: ''
			},
			count: 0,
			list: [],
			dispose: '', //处理数据
			currentIndex: 0,
			contentHeight: 0,
			rCurrentIndex: 0, //右边上面栏目选中
			//拣货中数据
			editInfo: {},
			editList: [],
			// 拣货完成要传的参数
			finishForm: {},

			isShow1: false,
			tel:'', // 用于判断是否是当前用户
			mode1:''
		};
	},
	onNavigationBarButtonTap(e) {
		this.isShow1 = !this.isShow1;
	},
	onShow() {
		this.tel =  uni.getStorageSync('userInfo').phone
		this.isShow1 = false;
	},
	onLoad() {
		let that = this
		this.contentHeight = Number(uni.getSystemInfoSync().windowHeight) - 55;
		// #ifdef APP-PLUS
		this.printInit();
		this.initScan();
		// this.iniPush()
		// this.pushGet()
		uni.$on('pushListen',function(data){
			if(data){
				that.query.page = 1
				that.list = []
				setTimeout(()=>{
					that.getData()
					that.leftNum();
				},500)
				
			}
		})
		// #endif
		this.getData();
		this.leftNum();
	},
	methods: {
		pushGet(){
			let that = this;
			uni.$on('pushListen',function(data){
				if(data){
					console.log(data,'data')
					that.query.page = 1
					that.list = []
					setTimeout(()=>{
						that.getData()
						that.leftNum();
					},500)
					
				}
			})
		},
		
		
		// 获取左边数量
		leftNum() {
			this.$api.numberLeftList().then(res => {
				console.log('测试2')
				if (res.data.code == 1) {
					this.leftCate[0].num = res.data.data.Ehsx;
					this.leftCate[1].num = res.data.data.Mt;
					this.leftCate[2].num = res.data.data.Elm;
					this.leftCate[3].num = res.data.data.Jddj;
				}
			});
		},
		// 扫码头
		initScan() {
			let _this = this;
			/* #ifdef APP-PLUS */
			main = plus.android.runtimeMainActivity(); //获取activity
			var IntentFilter = plus.android.importClass('android.content.IntentFilter');
			filter = new IntentFilter();
			filter.addAction(Net);
			receiver = plus.android.implements('io.dcloud.feature.internal.reflect.BroadcastReceiver', {
				onReceive(context, intent) {
					plus.android.importClass(intent);
					let code = intent.getStringExtra(DATA);
					let arrCode = intent.getByteArrayExtra(SOURCE);
					_this.queryCode(code);
				}
			});
			/* #endif */
		},
		startScan() {
			/* #ifdef APP-PLUS */
			main.registerReceiver(receiver, filter);
			/* #endif */
		},
		stopScan() {
			/* #ifdef APP-PLUS */
			main.unregisterReceiver(receiver);
			/* #endif */
		},
		queryCode(code) { 
			let that = this;
			//防重复
			if (_codeQueryTag) return false;
			_codeQueryTag = true;
			setTimeout(function() {
				_codeQueryTag = false;
			}, 150);
			console.log(code,'code数据')
			that.$api.cancelCheck({
				order_picking_id:that.editInfo.order_picking_id
			}).then(res1=>{ 
				if(res1.data.code!=1){
					that.$refs.popup.close()
					that.$tools.msg(res1.data.msg)
					that.query.page = 1
					that.list = []
					setTimeout(()=>{
						that.getData()
						that.leftNum()
					},500)
				}
			})
			
			//到这里扫描成功了，可以调用自己的业务逻辑，code就是扫描的结果
			let ret2 = that.editList.findIndex((v) => {
			    return v.sku_code == code;
			});
			if(ret2=='-1'){
				that.$refs.popTan.open()
			}else{
				that.editList.map(item => {
					if (item.sku_code ===  code) {
						if (item.qNum == item.num) {
							that.$tools.msg('此商品已拣货完成');
						}else{
							item.qNum++;
						}
					}
				});
			}
			return
		},
		// -----------------------------------

		// 打印设备
		printInit() {
			sunmi_print.connect(res => {
				isConnect = res.connect == 'hello';
			});
		},
		// 打印方法
		print(row) {
			console.log('------------------', row);
			let printData = {
				...row
				// time_words:'2020-04-22 11:10-13:31',
				// order_picking_id: 6, //序号
				// type_name: '京东到家', //类型
				// phone: '18202821297', //电话
				// address: '成都市锦江区猪八戒大楼2f2009左边靠左的一层', //地址
				// name: '汪海', //下单用户
				// telephone: '0574-89258819', //售后电话
			};
			if (isConnect) {
				sunmi_print.printText({
					text: `${printData.time_words}`,
					align: 1,
					size: printData.time_words.length > 8 ? '30' : '40',
					bold: true,
					underline: false,
					compact: true,
					skip: true
				});
				sunmi_print.printText({
					text: '———————————————', // 15个中文线
					align: 1,
					size: 30,
					bold: true,
					underline: false,
					compact: true,
					skip: true
				});
				sunmi_print.printText({
					text: `${printData.type_name} #${printData.order_picking_id}`,
					align: 1,
					size: 30,
					bold: true,
					underline: true,
					compact: true,
					skip: true
				});
				sunmi_print.printText({
					text: '  ',
					align: 1,
					size: 30,
					bold: true,
					underline: false,
					compact: true,
					skip: true
				});
				sunmi_print.printText({
					text: `收货人：${printData.name}`,
					align: 0,
					size: 24,
					bold: true,
					underline: false,
					compact: false,
					skip: true
				});
				sunmi_print.printText({
					text: `电话：${printData.phone}`,
					align: 0,
					size: 24,
					bold: true,
					underline: false,
					compact: false,
					skip: true
				});
				sunmi_print.printText({
					text: `地址：${printData.address}`,
					align: 0,
					size: 24,
					bold: true,
					underline: false,
					compact: false,
					skip: true
				});
				sunmi_print.printText({
					text: '          ',
					align: 1,
					size: 20,
					bold: true,
					underline: false,
					compact: true,
					skip: true
				});
				sunmi_print.printText({
					text: `售后电话：${printData.telephone}`,
					align: 0,
					size: 24,
					bold: true,
					underline: false,
					compact: false,
					skip: true
				});
				sunmi_print.printText({
					text: `如遇商品质量问题请拨打售后，感谢您的支持`,
					align: 0,
					size: 24,
					bold: true,
					underline: false,
					compact: false,
					skip: true
				});
				sunmi_print.printText({
					text: '  ',
					align: 1,
					size: 30,
					bold: true,
					underline: false,
					compact: true,
					skip: true
				});
				sunmi_print.printText({
					text: '          ',
					align: 1,
					size: 30,
					bold: true,
					underline: false,
					compact: true,
					skip: true
				});
				sunmi_print.printText({
					text: '          ',
					align: 1,
					size: 30,
					bold: true,
					underline: false,
					compact: true,
					skip: true
				});
			}
		},
		// 断开打印机
		over() {
			sunmi_print.disconnect();
		},

		// ----------------------------

		// 获取数据
		getData() {
			this.more = 'loading';
			this.$api.cateList(this.query).then(res => {
				console.log('测试以下')
				if (res.data.code == 1) {
					this.count = res.data.data.count;
					this.list = this.list.concat(res.data.data.list);
					this.rTopNav[0].number = res.data.picking_type_list.picking_type_a;
					this.rTopNav[1].number = res.data.picking_type_list.picking_type_b;
					this.rTopNav[2].number = res.data.picking_type_list.picking_type_c;
					if (this.count <= this.list.length) {
						this.more = 'noMore';
					} else {
						this.more = 'more';
					}
				} else {
					this.$tools.msg(res.data.msg);
				}
			});
		},
		// 左边切换事件
		selectLeft(index) {
			this.currentIndex = index;
			this.rCurrentIndex = 0;
			this.query.page = 1;
			this.query.type = index + 1;
			this.query.picking_type = 1;
			this.list = [];
			this.getData();
			this.leftNum();
		},
		// 右上切换事件
		selectTop(index) {
			this.list = [];
			this.rCurrentIndex = index;
			this.query.page = 1;
			this.query.picking_type = this.rCurrentIndex + 1;
			this.getData();
			this.leftNum();
		},

		// 拣货操作
		editPack(row) {
			this.finishForm = {
				...row
			};
			this.$api
				.goodsDetails({ state: 2, order_picking_id: row.order_picking_id })
				.then(res => {
					console.log(res,'res')
					this.editList = []
					if (res.data.code == 1) {
						this.editList = res.data.data.map(item => {
							return {
								...item,
								qNum: 0
							};
						});
					}
				})
				.catch(err => {
					console.log(err);
				});
		},
		// 拣货完成
		finish(type) {
			let that = this;
			let param = {
				picking_type: type,
				order_picking_id: that.finishForm.order_picking_id
			};
			if (that.dispose) {
				param.remarks = that.dispose;
			}
			that.$api.finishGoods(param).then(res => {
				if (res.data.code == 1) {
					that.$tools.msg(res.data.msg);
					that.query.page = 1;
					that.list = [];
					that.getData();
					that.leftNum();
					that.closePop1();
					that.closePop2();
					if (type == 2) {
						that.closePop3();
						return false;
					} else if (type == 3) {
						// 打印小票
						that.print(res.data.data);
					}
				} else {
					that.$tools.msg(res.data.msg);
				}
			});
		},

		// 打开关闭第一个弹窗
		openPop1() {
			this.startScan();
			this.$refs.popup.open();
		},
		// 第一个窗口取消事件
		cancelFirst(){
			let that = this
			uni.showModal({
			    title: '提示',
			    content: '是否要取消拣货？',
			    success: function (res) {
			        if (res.confirm) {
			            console.log('用户点击确定',that.editInfo);
						that.$api.cancelPicking({
							order_picking_id:that.editInfo.order_picking_id
						}).then(res=>{
							if(res.data.code==1){
								that.closePop1()
								that.closePop2()
								that.query.page = 1
								that.list = [];
								setTimeout(()=>{
									that.getData()
									that.leftNum();
									that.$tools.msg(res.data.msg)
								},500)
							}else{
								that.$tools.msg(res.data.msg)
							}
						})
			        } else if (res.cancel) {
			            console.log('用户点击取消');
			        }
			    }
			});
		},
		
		closePop1() { 
			let that = this
			//拣货中关闭弹窗
			
			that.stopScan();
			that.$refs.popup.close();
		},
		// 打开关闭第一个弹窗
		openPop2() {
			this.$refs.pop1.open();
		},
		closePop2() {
			this.$refs.pop1.close();
		},
		
		open(row,type) {
			let vm = this;
			if(type==1){
				vm.editInfo = {
					...row
				};
				vm.editPack(row);
				vm.openPop1();
			}else if(type==2 && vm.tel==row.admin_name){
				vm.editInfo = {
					...row
				};
				vm.editPack(row);
				vm.openPop1();
			}
			
		},
		// 第一个弹窗确定按钮
		comf1() {
			let vm = this;
			let finishArr = [];
			vm.editList.map(item => {
				if (item.qNum != item.num) {
					finishArr.push(item);
				}
			});
			if (finishArr.length > 0) {
				vm.closePop1();
				vm.openPop2();
			} else {
				vm.closePop1();
				uni.showModal({
					title: '提示',
					content: '是否确定提交',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							vm.finish(3);
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			}
		},
		// 第二个弹窗确认按钮
		comf2() {
			let that = this;
			that.closePop2();
			let param = [];
			uni.showModal({
				title: '提示',
				content: '是否确定提交',
				success: function(res) {
					if (res.confirm) {
						console.log('用户点击确定');
						if (that.editList.length) {
							that.editList.map(item => {
								if (parseInt(item.num) - parseInt(item.qNum) != 0) {
									param.push({ name: item.name, num: parseInt(item.num) - parseInt(item.qNum), sku_code: item.sku_code });
								}
							});
						}
						console.log(param, '==========');
						that.$api.submitRuku({ array: param, sType: 1, number: that.editInfo.number }).then(res => {
							if (res.data.code == 1) {
								that.finish(3);
							} else {
								that.$tools.msg(res.data.msg);
							}
						});
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
		},
		// 第二弹窗确认并报损按钮
		conAndBao() {
			let that = this;
			that.closePop2();
			let param = [];
			uni.showModal({
				title: '提示',
				content: '是否确定并报损',
				success: function(res) {
					if (res.confirm) {
						console.log('用户点击确定');
						that.finish(2);
					} else if (res.cancel) {
						console.log('用户点击取消');
						that.$api.cancelPicking({
							order_picking_id:that.editInfo.order_picking_id
						}).then(res=>{
							if(res.data.code==1){
								that.query.page = 1
								that.list = [];
								setTimeout(()=>{
									that.getData()
									that.leftNum();
									that.$tools.msg(res.data.msg)
								},500)
							}else{
								that.$tools.msg(res.data.msg)
							}
						})
					}
				}
			});
		},
		// 商品不存在时弹窗
		comfTan(){
			let that = this
			that.$refs.popTan.close()
		},
		// 扫码
		scanCode() {
			let that = this;
			uni.scanCode({
				onlyFromCamera: true,
				success: function(res) {
					that.editList.map(item => {
						if (item.sku_code == res.result) {
							if (item.qNum == item.num) {
								that.$tools.msg('此商品已拣货完成');
								return false;
							}
							item.qNum++;
						} else {
							console.log(11111);
						}
					});
				}
			});
		},
		// 第三弹窗确认按钮
		comf3(row) {
			// this.open3()
			this.finish(2);
		},
		del(row) {
			let that = this
			console.log('点击了删除');
			uni.showModal({
				title: '提示',
				content: '是否确定删除？',
				success: function(res) {
					if (res.confirm) {
						that.$api.deleteData({order_picking_id:row.order_picking_id}).then(res=>{
							if(res.data.code==1){
								that.$tools.msg(res.data.msg)
								that.query.page = 1;
								that.list = [];
								setTimeout(()=>{
									that.getData();
									that.leftNum();
								},500)
							}
						})
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
		},
		// 第三个弹窗
		open3(row) {
			this.dispose = '';
			this.finishForm = {
				...row
			};
			this.$refs.pop3.open();
		},
		// 关闭第三个弹窗
		closePop3() {
			this.$refs.pop3.close();
		},
		searchInput(e) {
			console.log(e.detail.value);
			if (e.detail.value.length > 2) {
				this.query.number = e.detail.value;
			} else {
				this.query.number = '';
			}
			setTimeout(() => {
				this.list = [];
				this.getData();
			}, 500);
		},
		// 滑倒底部翻页
		lower() {
			if (this.count <= this.list.length) {
				this.more = 'noMore';
				return false;
			}
			this.query.page++;
			this.getData();
		}
	}
};
</script>

<style lang="less" scoped>
.search-box {
	width: 100%;
	height: 100upx;
	background: #ffffff;
	display: flex;
	justify-content: center;
	align-items: center;
	.search {
		width: 500upx;
		height: 55upx;
		border-radius: 26upx;
		background: #f2f2f2;
		display: flex;
		flex-direction: row;
		align-items: center;
		.icon {
			font-size: 28upx;
			padding: 0 20upx;
			color: #999999;
		}
		input {
			flex: 1;
			font-size: 24upx;
		}
	}
}
.content-box {
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	.left-content {
		width: 24%;
		height: 100%;
		background: #fafafa;
		.left-item {
			width: 100%;
			height: 90upx;
			// line-height: 90upx;
			text-align: center;
			font-size: 24upx;
			color: #333333;
			position: relative;
			// padding: 40upx 0 0;
			text {
				line-height: 90upx;
			}
			.grod {
				position: absolute;
				right: 16upx;
				top: 14upx;
				padding: 3upx 10upx;
				background: red;
				font-size: 20upx;
				color: #ffffff;
				border-radius: 50%;
				// width: 60upx;
				// height: 60upx;
			}
		}
	}
	.right-content {
		width: calc(75% - 30upx);
		padding: 0 15upx;
		display: flex;
		flex-direction: column;
		.r-top-nav {
			width: 100%;
			display: flex;
			flex-direction: row;
			align-items: center;
			border-bottom: 1upx solid #f2f2f2;
			padding: 15upx 0 20upx;
			.r-t-item {
				flex: 1;
				text-align: center;
				position: relative;
				font-size: 25upx;
				color: #666666;
				text {
					position: absolute;
					top: -10upx;
					padding: 2upx 10upx;
					border-radius: 50%;
					background: red;
					font-size: 20upx;
					color: #ffffff;
				}
			}
		}
		.r-bottom-box {
			width: 100%;
			display: flex;
			flex-direction: column;
			.list {
				width: 100%;
				padding: 20upx 0;
				display: flex;
				flex-direction: column;
				position: relative;
				border-bottom: 1upx solid #f2f2f2;
				.indexList {
					font-size: 20upx;
					color: #666666;
				}
				.order {
					font-size: 25upx;
					color: #333333;
					font-weight: 500;
				}
				.time {
					font-size: 21upx;
					color: #666666;
					text {
						color: #27d78e;
					}
				}
				.remarks {
					font-size: 20upx;
					color: #666666;
					width: 77%;
				}
				.a-btn {
					position: absolute;
					right: 0;
					top: 50%;
					width: 110upx;
					height: 45upx;
					line-height: 45upx;
					text-align: center;
					border-radius: 4upx;
					font-size: 24upx;
					color: #ffffff;
					background: #e58203;
					border-radius: 7upx;
				}
			}
		}
	}
}
// 左边栏目点击事件
.current {
	position: relative;
	z-index: 0;
	background-color: #c8fff5;
	color: #333333;
}
.current::after {
	position: absolute;
	content: '';
	width: 90upx;
	height: 7upx;
	background: #21e6c1;
	opacity: 0.5;
	bottom: 30upx;
	left: 45upx;
}
// 右边上栏目点击事件
.r-current {
	z-index: 0;
	font-size: 27upx;
	font-weight: bold;
	color: #21e6c1 !important;
}
.r-current::after {
	position: absolute;
	content: '';
	width: 72upx;
	height: 5upx;
	background: #21e6c1;
	bottom: -20upx;
	left: 50%;
	margin-left: -36upx;
}

.pop-box {
	width: 630upx;
	background: #ffffff;
	border-radius: 17upx;
	padding: 30upx 0;
	display: flex;
	flex-direction: column;
	position: relative;
	.title {
		position: relative;
		width: 100%;
		text-align: center;
		font-size: 27upx;
		color: #333333;
		font-weight: bold;
		padding-bottom: 20upx;
		border-bottom: 1upx solid #f2f2f2;
	}
	.title::after {
		position: absolute;
		content: '';
		width: 100upx;
		height: 7upx;
		background: #21e6c1;
		bottom: 0;
		left: 50%;
		margin-left: -50upx;
	}
	.conten {
		padding: 30upx 0 20upx;
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		color: #555555;
		font-size: 24upx;
		textarea {
			padding: 20upx;
			font-size: 24upx;
			background: #f7f7f7;
		}
	}
	.pop-info {
		width: calc(100% - 80upx);
		padding: 30upx 40upx 25upx;
		display: flex;
		flex-direction: column;
		position: relative;
		.info-top {
			width: 100%;
			display: flex;
			flex-direction: row;
			align-items: center;
			text {
				flex: 2;
				font-size: 24upx;
				color: #cccccc;
			}
			text:last-child {
				flex: 1;
				text-align: right;
				font-size: 20upx;
				color: #666666;
			}
		}
		.order {
			font-size: 24upx;
			color: #333333;
			padding: 15upx 0;
		}
		.time {
			font-size: 24upx;
			color: #666;
			text {
				color: #e69021;
			}
		}
		.scan {
			position: absolute;
			background: #21e6c1;
			bottom: 16upx;
			right: 40upx;
			color: #ffffff;
			border-radius: 10upx;
			padding: 5upx;
		}
	}
	.pop-content {
		width: 100%;
		display: flex;
		flex-direction: column;
		.pop-content-tit {
			width: calc(100% - 80upx);
			padding: 0 40upx;
			height: 50upx;
			line-height: 50upx;
			background: #f9f9f9;
			font-size: 24upx;
			color: #555555;
			display: flex;
			flex-direction: row;
			align-items: center;
			text {
				flex: 1;
			}
			text:last-child {
				text-align: right;
			}
		}
		.cont-item {
			width: calc(100% - 80upx);
			padding: 20upx 40upx;
			display: flex;
			flex-direction: column;
			.item-1 {
				width: 100%;
				display: flex;
				flex-direction: column;
				position: relative;
				padding: 20upx 0;
				border-bottom: 1upx solid #f2f2f2;
				.name {
					font-size: 24upx;
					color: #666666;
				}
				.sku {
					font-size: 20upx;
					color: #999999;
					padding-top: 10upx;
				}
				.number {
					position: absolute;
					right: 0;
					top: 40%;
					font-size: 24upx;
					color: #666666;
				}
			}
		}
	}
	.pop-btn-group {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: center;
		margin-top: 20upx;
		.cancel {
			color: #666666 !important;
			background: #f2f2f2 !important;
		}
		.submit,
		.cancel {
			margin: 0 10upx;
			height: 50upx;
			line-height: 50upx;
			font-size: 24upx;
			color: #ffffff;
			padding: 0 30upx;
			border-radius: 7upx;
			background: #21e6c1;
		}
	}
}
</style>
